<template>
  <div class="SystematicSDList">
    <div class="pubBig standard">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dLeftMain">
        <div class="menu">
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            accordion
            highlight-current
          ></el-tree>
        </div>
      </div>
      <div class="dRightMain">
        <div class="form-group">
          <p class="lt">
            您选择的字典大类：
            <span>{{tabiitem}}</span>
          </p>
          <p class="rt">
            <button
              class="btn btn-default"
              @click="() => append()"
            >新增</button>
            <!-- <button class="btn btn-default" @click="Succesful()">保存</button>
            <button class="btn btn-default" @click="Quxiao()">取消</button>-->
          </p>
        </div>
        <div class="Tb">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>分类</th>
                <th>医院编号</th>
                <th>关键字代码</th>
                <th>关键字名称</th>
                <th>代码</th>
                <th>名称</th>
                <th>拼音码</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(item,index) in listdata"
                :key="index"
                @click="gettr(item,index)"
                :class="index == tabindex ?'selGreen':''"
              >
                <td>{{item.keyclass}}</td>
                <td>{{item.hospitalid}}</td>
                <td>{{item.keycode}}</td>
                <td>{{item.keyname}}</td>
                <td>{{item.code}}</td>
                <td>{{item.name}}</td>
                <td>{{item.pym}}</td>
                <td>
                  <!-- <button class="btn btnBlue btn-xs" @click="bianji(item,index)">编辑</button> -->
                  <i @click="bianji(item,index)">编辑</i>
                  <i
                    @click="detle()"
                    style="color:red;"
                  >删除</i>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!--弹框   编辑字典-->
      <div
        class="blackBg hyCZBg"
        v-if="Bianji == true"
      >
        <div class="panel-default column2">
          <em
            class="closes"
            @click="FollowBj()"
          >×</em>
          <div class="panel-heading">编辑字典</div>
          <div class="pucLabel">
            <div class="form-group clearfix">
              <p>
                <label>分类：</label>
                <input
                  type="text"
                  class="form-control"
                  readonly
                  v-model="obj.keyclass"
                />
              </p>
              <p>
                <label>医院编号：</label>
                <input
                  type="text"
                  class="form-control"
                  readonly
                  v-model="obj.hospitalid"
                />
              </p>
              <p>
                <label>关键字代码：</label>
                <input
                  type="text"
                  class="form-control"
                  readonly
                  v-model="obj.keycode"
                />
              </p>
              <p>
                <label>关键字名称：</label>
                <input
                  type="text"
                  class="form-control"
                  readonly
                  v-model="obj.keyname"
                />
              </p>
              <p>
                <label>代码：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="obj.code"
                />
              </p>
              <p>
                <label>名称：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="obj.name"
                />
              </p>
              <p>
                <label>拼音码：</label>
                <input
                  type="text"
                  class="form-control"
                  v-model="obj.pym"
                />
              </p>
            </div>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-default"
              @click="FollowBj()"
            >关闭</button>
            <button
              type="button"
              class="btn btn-primary"
              @click="Successfuling()"
            >保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      data: [],
      defaultProps: {
        children: "keycodelist",
        label: "keyname"
      },
      listdata: [],
      tabindex: 0,
      tabiitem: "全部",
      Bianji: false,
      obj: {
        keyclass: "",
        hospitalid: "",
        keycode: "",
        keyname: "",
        code: "",
        name: "",
        pym: ""
      }
    };
  },
  methods: {
    handleNodeClick (data) {
      console.log(data);
      this.tabiitem = data.keyclass;
      if (data.keycode) {
        var list = {
          Model: "11.综合维护-系统标准字典",
          code: "11403",
          input: {
            name: "",
            keycode: data.keycode
          }
        };
        this.$post("CloudHIS/Business_Handle", list)
          .then(res => {
            if (res.code == 0) {
              console.log(res.data);
              this.tabiitem = res.data[0].keyclass;
              this.listdata = res.data;
              this.$message({
                showClose: true,
                message: res.msg,
                type: "success"
              });
            } else {
              this.$message({
                showClose: true,
                message: res.msg,
                type: "warning"
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    queryG () {
      var data = {
        Model: "11.综合维护-系统标准字典",
        code: "11404",
        input: {
          name: "",
          keycode: ""
        }
      };
      this.$post("CloudHIS/Business_Handle", data)
        .then(res => {
          console.log(res.data);
          res.data.forEach(v => {
            v.keyname = v.keyclass;
          });
          this.data = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    append () {
      this.Bianji = true;
      this.obj = {
        code: "",
        hospitalid: -1,
        id: -1,
        keyclass: this.listdata[this.tabindex].keyclass,
        keycode: this.listdata[this.tabindex].keycode,
        keyname: this.listdata[this.tabindex].keyname,
        name: "",
        pym: ""
      };
      console.log(this.listdata);
    },
    bianji (item, index) {
      this.Bianji = true;
      this.obj = item;
      console.log(item);
      console.log(index);
    },
    FollowBj () {
      this.Bianji = false;
      this.$message({
        showClose: true,
        message: "已经取消编辑",
        type: "warning"
      });
    },
    Successfuling () {
      console.log(this.obj);
      var data = {
        Model: "11.综合维护-系统标准字典",
        code: "11401",
        input: {
          keyclass: this.obj.keyclass,
          keycode: this.obj.keycode,
          keyname: this.obj.keyname,
          code: this.obj.code,
          name: this.obj.name,
          pym: this.obj.pym,
          hospital_id: this.obj.hospital_id,
          Id: this.obj.Id
        }
      };
      this.$post("CloudHIS/Business_Handle", data)
        .then(res => {
          console.log(res);
          if (res.code == 0) {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success"
            });
            this.listdata.splice(this.tabindex, 1, this.obj);
            this.Bianji = false;
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    Succesful () {
      console.log(this.listdata);
      console.log(this.listdata[this.tabindex]);
      if (this.listdata[this.tabindex].keyclass == undefined) {
        this.$message({
          showClose: true,
          message: "不可为空",
          type: "error"
        });
        return;
      } else if (this.listdata[this.tabindex].keycode == undefined) {
        this.$message({
          showClose: true,
          message: "不可为空",
          type: "error"
        });
        return;
      } else if (this.listdata[this.tabindex].keyname == undefined) {
        this.$message({
          showClose: true,
          message: "不可为空",
          type: "error"
        });
        return;
      } else {
        this.listdata.splice(this.tabindex, 1, this.listdata[this.tabindex]);
        var data = {
          Model: "11.综合维护-系统标准字典",
          code: "11401",
          input: {
            keyclass: this.listdata[this.tabindex].keyclass,
            keycode: this.listdata[this.tabindex].keycode,
            keyname: this.listdata[this.tabindex].keyname,
            code: this.listdata[this.tabindex].code,
            name: this.listdata[this.tabindex].name,
            pym: this.listdata[this.tabindex].pym,
            hospital_id: this.listdata[this.tabindex].hospital_id,
            Id: this.listdata[this.tabindex].Id
          }
        };
        this.$post("CloudHIS/Business_Handle", data)
          .then(res => {
            console.log(res);
            if (res.code == 0) {
              this.$message({
                showClose: true,
                message: res.msg,
                type: "success"
              });
            } else {
              this.$message({
                showClose: true,
                message: res.msg,
                type: "error"
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    gettr (item, index) {
      console.log(item);
      this.tabindex = index;
    },
    detle () {
      this.$confirm("此操作将永久删除该词典, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.detelaeful();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    detelaeful () {
      var data = {
        Model: "11.综合维护-系统标准字典",
        code: "11402",
        input: {
          id: this.listdata[this.tabindex].id
        }
      };
      this.$post("CloudHIS/Business_Handle", data)
        .then(res => {
          if (res.code == 0) {
            this.listdata.splice(this.tabindex, 1);
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success"
            });
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          this.$message({
            showClose: true,
            message: err,
            type: "error"
          });
          console.log(err);
        });
    },
    Quxiao () {
      if (this.listdata[this.tabindex].keyclass == undefined) {
        this.$message({
          showClose: true,
          message: "不可为空",
          type: "error"
        });
        return;
      } else if (this.listdata[this.tabindex].keycode == undefined) {
        this.$message({
          showClose: true,
          message: "不可为空",
          type: "error"
        });
        return;
      } else if (this.listdata[this.tabindex].keyname == undefined) {
        this.$message({
          showClose: true,
          message: "不可为空",
          type: "error"
        });
        return;
      } else {
        this.$message({
          showClose: true,
          message: "已经取消操作",
          type: "warning"
        });
      }
    }
  },
  created () {
    if (this.$route.query.Token) {
      localStorage.setItem('Token', this.$route.query.Token)
    }
    this.queryG();
  }
};
</script>
<style  lang="scss">
.SystematicSDList {
  input {
    color: #000;
  }
  .column2 label {
    width: 98px;
  }
  table tbody tr td i {
    color: #0092ff;
    margin-right: 5px;
    font-style: normal;
  }
  .selGreen {
    color: #fff;
    background: #155a00 !important;
    i {
      color: #fff;
    }
  }
  .dRightMain .Tb {
    position: absolute;
    top: 90px;
    left: 244px;
    right: 15px;
    bottom: 20px;
    border: 1px solid #ddd;
  }
}
</style>
